<template>
    <view class="mb-8">
        <view class="mb-6 flex items-center justify-between">
            <h2 class="text-xl font-bold md:text-2xl">{{ title }}</h2>
            <navigator v-if="isShowMore" url="#" href="#" class="text-gray-400 transition hover:text-accent"
                >查看更多 ></navigator
            >
        </view>
        <view class="grid grid-cols-3 gap-4 md:gap-6 lg:grid-cols-6">
            <navigator url="/pages/list/list" v-for="(item, index) in list" :key="index" @click="handleClickCard"
                ><view class="flex flex-col items-center">
                    <img
                        mode="aspectFill"
                        :src="item.img"
                        alt="poster"
                        referrerpolicy="no-referrer"
                        loading="lazy"
                        class="rounded-xl sm:rounded-2xl lg:rounded-xl" />
                    <view class="text-sm md:text-base">{{ item.name }}</view>
                </view></navigator
            >
        </view>
    </view>
</template>

<script setup lang="ts">
interface Props {
    title: string;
    list: { url: string; name: string; img: string }[];
    isShowMore?: boolean;
}
withDefaults(defineProps<Props>(), {
    title: "热门电影",
    isShowMore: false,
    list: () => [{ url: "", name: "", img: "" }]
});

const handleClickCard = (event: MouseEvent) => {
    console.log(event);
    uni.switchTab({ url: "/pages/list/list" });
};
</script>

<style scoped lang="scss">
.card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;

    img {
        width: 100%;
        object-fit: cover;
        transition: all 0.3s ease-in-out;
    }

    h2 {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px;
        font-size: 26px;
    }

    &:hover {
        img {
            transform: scale(1.1);
        }
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }
}
</style>
